<script lang="ts" setup>
// 接收页面参数
import {onLoad} from "@dcloudio/uni-app";
import {ref} from "vue";
import type {TheBestAnimalItem} from "@/types/hot";
import {getTheBestListApi} from "@/api/home";
import {IMessage} from "@/components/aw-message/message";

/**
 * 世界之最模块
 * 因为数据并不是很多后台可一次性返回完
 * 用户可能点击查看更多或具体某一个动物进入
 * 1、点击更多无需做任何处理，默认展示第一个
 * 2、点击具体某一个，则当前currentIndex应该是用户对应的动物，可根据bestId来获取当前动物的索引
 */
const isLoading = ref(true)
const {safeAreaInsets} = uni.getSystemInfoSync()
const animal = ref<TheBestAnimalItem>() // 当前选中的动物(默认用户点击进入的一个)
const theBestAnimalList = ref<TheBestAnimalItem[]>([]) // 世界之最动物列表
const currentIndex = ref(0) // 当前页面索引，用于控制页面滚动
onLoad(async (options) => {
  await getTheBestList()
  const tempBest = options?.bestId// 获取页面参数
  if (tempBest) {
    // 获取当前索引
    currentIndex.value = theBestAnimalList.value.findIndex(item => item.bestId === Number(tempBest))
  }
  setTimeout(() => {
    isLoading.value = false
  }, 500)

})

// 获取初始数据
const getTheBestList = async () => {
  const res = await getTheBestListApi(1, 100)
  theBestAnimalList.value = res.data.data
  prompt.value = new Array(theBestAnimalList.value.length - 1)
}

// swiper 切换
const handleBestSwiperChange: UniHelper.SwiperOnChange = (event) => {
  currentIndex.value = event.detail.current
}

// 返回
const goBack = () => {
  uni.navigateBack()
}

//强调世界之最
const highlightText = (text: string) => {
  const regex = /最([^的]*)的/g;
  return text.replace(regex, '<span style="color: #39c5bb;font-style: italic;font-size: 24px;margin: 0 2px;text-shadow: 5px 0 13px rgba(0,0,0,.5)">最$1</span>的')
}
const nextText = (text: string) => {
  if (!text) {
    return
  }
  const startIndex_1 = text.indexOf("动物")
  const startIndex_2 = text.indexOf("最")
  if (startIndex_1 !== -1) {
    return text.substring(0, startIndex_1 + 2)
  } else {
    return text.substring(0, startIndex_2 + 6)
  }
}

// 猜题提示
const showTip = ref(true)
const handleCloseTip = () => {
  showTip.value = false
}

// 用户猜测
const bestGuessPopup = ref()
const userValue = ref()
const prompt = ref()
/**
 * 提示
 */
const handleGuess = () => {
  prompt.value
  bestGuessPopup.value.open()
}
const onConfirm = (value: string) => {
  if (theBestAnimalList.value[currentIndex.value === theBestAnimalList.value.length - 1 ? 0 : currentIndex.value + 1].name === value) {
    if (currentIndex.value === theBestAnimalList.value.length - 1) {
      currentIndex.value = 0
    } else {
      currentIndex.value++
    }
    IMessage({
      content: "猜对了！你真厉害(≧∇≦)ﾉ",
      type: 'success',
      showIcon: true
    })
  } else {
    IMessage({
      content: "猜错了！再想想吧",
      type: 'error',
      showIcon: true
    })
  }
}

//前往详情页
const goDetail = (id: number) => {
  if (!id) {
    return uni.showToast({title: '即将开放', icon: "none"})
  }
  uni.navigateTo({
    url: '/subPkg/detail/detail?id=' + id
  })
}

//点击分享
const _createImageBest=()=>{
  uni.showToast({title: '即将开放', icon: "none"})
}
</script>

<template>
  <view v-if="isLoading" class="flex align-center" style="height: 100vh">
    <aw-loader></aw-loader>
  </view>
  <view v-show="!isLoading" class="best">
    <text class="cuIcon-back line-awGreen"
          style="font-size: 24px;position: fixed;left: 10px;top: 4%;z-index: 9;border-radius: 50%"
          @tap="goBack"></text>
    <text style="position: fixed;right: 5%;z-index: 999" class="shareIcon" @tap.prevent="_createImageBest">
      <uni-icons :size="28" color="#f4f4f4" type="redo" style="text-shadow:  2px 2px 4px rgba(0, 0, 0, 0.6)"></uni-icons>
    </text>
    <swiper :circular="true" :current="currentIndex" :vertical="true" class="best-swiper" easing-function="linear"
            @change="handleBestSwiperChange">
      <swiper-item v-for="(item,index) in theBestAnimalList" :key="item.bestId"
                   class="best-swiper-item flex justify-center align-center ">
        <!--        背景大图放大加模糊-->
        <uv-image v-if="item.img" :src="item.img" height="100%" mode="aspectFill"
                  style="position: absolute;top: 0;left: 0;bottom: 0;right:0;filter: blur(10px);z-index: -1;"
                  width="100%">
          <template v-slot:error>
            <!--            加载失败显示-->
            <image mode="aspectFit" src="/static/error-img.png" style="width: 200px;height: 200px"></image>
          </template>
        </uv-image>
        <!--        <view style="position: absolute;top: 0;left: 0;bottom: 0;right:0;backdrop-filter:blur(5px);z-index: 1;">
                </view>-->
        <!--        显示区域-->
        <view class="flex flex-column" style="z-index: 2;width: 100%;height: 100%;position: relative">
          <!--          高清图像区-->
          <view class="flex flex-column justify-center align-center"
                style="overflow: hidden;gap: 6px;padding-bottom: 20px">
            <view class="flex justify-center align-center"
                  style="width: 100%;border-radius: 0 0 10px 10px;overflow: hidden">
              <uv-image v-if="item.img" :src="item.img" mode="aspectFill" width="100%">
                <template v-slot:loading>
                  <!--            加载失败显示-->
                </template>
                <template v-slot:error>
                  <!--                  &lt;!&ndash;            加载失败显示&ndash;&gt;-->
                  55555555555555
                  <image mode="aspectFit" src="/static/error-img.png"></image>
                </template>
              </uv-image>
              <view v-if="!item.img" class="flex justify-center align-center flex-column" style="width: 100%">
                <image mode="aspectFit" src="/static/home-selected.png" style="width: 200px;height: 200px"></image>
                <text>图片暂缺</text>
              </view>
            </view>
          </view>

          <view class="flex align-center justify-center best-name">
            <text class="text-white"
                  style="letter-spacing: 10px;font-weight: normal;font-size: 26px;writing-mode: vertical-rl">
              {{ item.name }}
            </text>
            <image mode="aspectFit"
                   src="/static/guess-like.png"
                   style="width: 40px;height: 40px;position: absolute;top: 0;right: 0;
                   transform: translate(0,-50%) rotate(30deg)"></image>
          </view>
          <!--        文字区  -->
          <view class="flex align-center justify-center best-desc flex-column" style="gap: 10px">
            <view class="text-white"
                  style="font-weight: normal;font-size: 20px;" v-html="highlightText(item.desc)">
            </view>
            <view class="flex align-center" style="font-size: 14px;align-self: self-end;color: #FFFFFF"
                  @tap="goDetail(item.animalId)">前往详情页
              <text class="cuIcon-right text-white" style="font-size: 14px">

              </text>
            </view>
          </view>

          <!--          下一个区域-->
          <view class="flex justify-center align-center best-next flex-column" @tap="handleGuess">
            <text class=" text-white">下一个——{{
                prompt[index] = index === theBestAnimalList.length - 1 ? nextText(theBestAnimalList[0]?.desc) : nextText(theBestAnimalList[index + 1]?.desc)
              }}
              <text class="cuIcon-questionfill line-awGreen" style="font-size: 18px"></text>
            </text>
            <text v-if="showTip" class=" flex align-center justify-center text-black"
                  style="font-size: 12px;gap: 3px;">
              可以点击猜测哟ヾ(≧▽≦*)o
              <text class="cuIcon-roundclosefill  line-awGreen" style="font-size: 18px"
                    @tap.stop="handleCloseTip"></text>
            </text>
          </view>
        </view>
      </swiper-item>
    </swiper>
    <uni-popup ref="bestGuessPopup" type="dialog">
      <uni-popup-dialog ref="inputClose" :placeholder="prompt[currentIndex===theBestAnimalList?.length?0:currentIndex]"
                        mode="input"
                        title="猜一猜" @confirm="onConfirm"></uni-popup-dialog>
    </uni-popup>
  </view>
</template>


<style lang="scss" scoped>
.best {
  /* #ifdef H5 */
  background-color: #fff;
  /* #endif */
}
.shareIcon{
  z-index: 9;
  /* #ifdef H5 */
  top: 3%;
  /* #endif */
  /* #ifndef H5 */
  top: 5%;
  /* #endif */
}
.best-swiper {
  width: 100%;
  height: 100vh;

  &-item {
    width: 100%;
    height: 100%;
    position: relative;
    background: linear-gradient(45deg, rgba(57, 197, 187, 0.5), rgba(62, 190, 211, 0.5));
  }
}

.best-name {
  backdrop-filter: blur(15px);
  box-shadow: 0 0 8px #f1f1f1;
  width: 20%;
  max-height: 35%;
  position: absolute;
  top: 43%;
  left: 10%;
  padding: 15px 0;
  transform: translate(0, -50%);
  border-radius: 30px;
  background-color: rgb(255, 255, 255, 0.3);
}

.best-desc {
  backdrop-filter: blur(15px);
  padding: 10px 10px;
  position: absolute;
  max-width: 50%;
  max-height: 50%;
  top: 45%;
  right: 10%;
  border-radius: 20px;
  overflow: hidden;
  line-height: 1.3;
  background-color: rgb(255, 255, 255, 0.3);
}

.best-next {
  position: absolute;
  bottom: 8%;
  backdrop-filter: blur(10px);
  border-radius: 4px;
  display: flex;
  left: 50%;
  transform: translate(-50%, 0);
  padding: 5px 10px;
  justify-content: center;
  align-items: center;
  background-color: rgb(255, 255, 255, 0.5);
  font-size: 14px;
  gap: 5px;
}
</style>
